<template>
    <button @click="toggleComponent">卸载组件</button>
    <MyComponent v-if="showComponent"></MyComponent>
</template>
<script>
import { onBeforeUnmount, onUnmounted, ref } from 'vue';

const MyComponent = {
    setup() {
        onBeforeUnmount(() => {
            console.log("MyComponent即将卸载")
        }),
            onUnmounted(() => {
                console.log("MyComponent成功卸载")
            })
    }
}

export default {
    components: {
        MyComponent
    },
    setup() {
        const showComponent = ref(true);
        function toggleComponent() {
            showComponent.value = !showComponent.value
        }
        return {
            showComponent,
            toggleComponent
        }
    }

}
</script>